$breakpoints: (
  "portrait": "screen and (orientation:portrait)",
  "landscape": "screen and (orientation:landscape)",
  "iphone5": "only screen and ( max-width: 350px)",
  "xs": "only screen and ( max-width: 479px)",
  "sm": "only screen and ( max-width: 767px)",
  "max839": "only screen and ( max-width: 839px)",
  "md": "only screen and ( max-width: 991px)",
  "max1100": "only screen and ( max-width: 1100px)",
  "lg": "only screen and ( max-width: 1199px)",
  "max1365": "only screen and ( max-width: 1365px)",
  "max1366": "only screen and ( max-width: 1366px)",
  "max1439": "only screen and ( max-width: 1439px)",
  "max1440": "only screen and ( max-width: 1440px)",
  "max1580": "only screen and ( max-width: 1580px)",
  "max1799": "only screen and ( max-width: 1799px)",
  "minsm": "only screen and ( min-width: 768px)",
  "xsh": "only screen and ( max-height: 479px)",
  "iphoneXL": "only screen and (min-width: 812px) and (orientation: landscape)",
) !default;

@mixin respond-to($breakpoint) {
  $query: map-get($breakpoints, $breakpoint);

  @if not $query {
    @error 'No value found for `#{$breakpoint}`. Please make sure it is defined in `$breakpoints` map.';
  }

  @media #{if(type-of($query) == 'string', unquote($query), inspect($query))} {
    @content;
  }
}
